<!doctype html>
<html><head>
	<meta charset="utf-8">
	<title>[(${dto.menu.title})]</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="icon" type="image/x-icon" href="/static/img/favicon.ico">
	
	<!-- jQuery-->
	<script type="text/javascript" src="/static/plugins/jquery/jquery-3.6.0.min.js"></script>
	
	<!-- layui-->
	<link rel="stylesheet" href="/static/plugins/layui/2.7.6/css/layui.css" media="all">
	<script src="/static/plugins/layui/2.7.6/layui.js" charset="utf-8"></script>
	
	<!-- common -->
	<link rel="stylesheet" href="/static/admin/css/common.css" media="all" />
	<script type="text/javascript" src="/static/admin/js/common-grid.js?v=c"></script>
	<link rel="stylesheet" href="/static/admin/css/mini-ease.css" media="all" />
	
	<!-- iconfont -->
	<link rel="stylesheet" href="/static/css/icon/iconfont.css" media="all" />

	<!-- 页面js-->
	<script type="text/javascript" src="/static/js/business/tpAmazonAnalysis/tpAmazonAnalysis.js?v=c"></script>
	
</head>
<style>
    .layui-table-header .layui-table-cell{
        height:auto;
        overflow:visible;
        text-overflow:inherit;
        white-space:normal;
        line-height: 20px;
        word-break: break-all;
    }
	.layui-table-cell{
		font-size: 12px;
		height:20px;
		line-height: 20px;
	}
	.layui-table-cell-tr4{
		border-top-style: solid ! important;
		border-top-color: #eee !important;
		border-top-width: 3px !important;
	}
</style>
<body style="padding: 10px 0 0 10px;">

<div class="layui-row layui-col-space5" style="width:100%;">
	<!-- 左边面板【start】 -->
	<div class="layui-col-md10" id="id_panel_left_grid">
		<div class="layui-panel" style="overflow: auto; padding-top: 0.2rem;">
			<div class="mid-content">

				<table class="layui-hide" id="main_table" lay-filter="main_table"></table>

				<script type="text/html" id="toolbarDemo">
					<div class="layui-btn-container">
						<a th:each="button : ${dto.toolbar.buttonArr}" class="layui-btn layui-btn-normal layui-btn-xs" th:lay-event="${button.event}"><i class="iconfont" th:classappend="${button.icon}"></i>[(${button.name})]</a>
					</div>
				</script>
	
	<script type="text/html" id="templet_index_no">
	{{d.LAY_TABLE_INDEX+1}}
	</script>
	<!-- 列表图片 -->
	<script type="text/html" id="urlTemplet">
		<img src="{{d.mainImage}}" data-type="1" height="30" class="preview-all"/>
	</script>

					<script th:inline="javascript">
						var secondCols = [//二级表头设置
                            {title: '店铺名', field:'shopName', align:"center", rowspan:2,width:73,totalRowText: '合计',fixed:'left'}
                            ,{title: '运营公司简称', field:'companyName', align:"center",width:57, rowspan:2,fixed:'left'}
                            ,{title: '运营人', field:'userName', align:"center", rowspan:2,width:40,fixed:'left'}
                            ,{title: '图片', field:'mainImage', align:"center", templet: '#urlTemplet', rowspan:2,width:60,fixed:'left'}
                            ,{title: '商品编码', field:'code', align:"center", rowspan:2,width:60,fixed:'left'}
                            ,{title: '商品名称', field:'name', align:"center", rowspan:2,width:84,fixed:'left'}
                            ,{title: 'SKU', field:'sellerSku', align:"center", rowspan:2,width:40,templet:
								function(d){
									return '<span>'+(d.countIsShow=='0'?'':d.sellerSku)+'</span>';
								}
							}
                            ,{title: 'ASIN', field:'asin', align:"center", rowspan:2,width:40,templet:
								function(d){
									return '<span>'+(d.countIsShow=='0'?'':(d.asin!=undefined&&d.asin!=null?d.asin:''))+'</span>';
								}
							}
                            ,{title: 'FNSKU', field:'fnSku', align:"center", rowspan:2,width:40}
							//,{title: '评论', field:'comment', align:"center"}
							//,{title: '评分', field:'score', align:"center"}
							,{title: '购买赢得率', field:'buyWinProbability', align:"center",width:40, rowspan:2}
							,{title: '转化率', field:'changeProbability', align:"center",width:40, rowspan:2}
							,{title: '数量', field:'fulfillableQuantity', align:"center",width:40, rowspan:2,totalRow: true,templet:
								function(d){
									return '<span style="font-weight: bold; color: red;">'+(d.fulfillableQuantity)+'</span>';
								}

							}//亚马逊库存
							,{title: '<div class="layui-txt-tips01">30天库存系数</div>', field:'amazonCountThirty', align:"center" ,width:40,style:"height:60;", rowspan:2}
							,{title: '<div class="layui-txt-tips02">90天库存系数</div>', field:'amazonCountNinety', align:"center" ,width:40, rowspan:2,hide:true}
							,{title: '数量', field:'wayNum', align:"center",width:40, rowspan:2,totalRow: true,templet:
										function(d){
											return '<span style="font-weight: bold; color: red;">'+(d.wayNum)+'</span>';
										}
						}//在途库存
							,{title: '<div class="layui-txt-tips11">30天库存系数</div>', field:'wayCountThirty', align:"center" ,width:40, rowspan:2}
							,{title: '<div class="layui-txt-tips12">90天库存系数</div>', field:'wayCountNinety', align:"center" ,width:40, rowspan:2,hide:true}
							,{title: '数量', field:'inboundWorkingQuantityCount', align:"center",width:40, rowspan:2,totalRow: true,templet:
										function(d){
											return '<span style="font-weight: bold; color: red;">'+(d.inboundWorkingQuantityCount)+'</span>';
										}
						}//仓储库存
							,{title: '<div class="layui-txt-tips21">30天库存系数</div>', field:'boundCountThirty', align:"center" ,width:40, rowspan:2}
							,{title: '<div class="layui-txt-tips22">90天库存系数</div>', field:'boundCountNinety', align:"center" ,width:40, rowspan:2,hide:true}
							,{title: '数量', field:'noStorageCount', align:"center",width:40, rowspan:2,totalRow: true,templet:
										function(d){
											return '<span style="font-weight: bold; color: red;">'+(d.noStorageCount)+'</span>';
										}
						}//采购库存
							,{title: '<div class="layui-txt-tips31">30天库存系数</div>', field:'noStorageCountThirty', align:"center" ,width:40, rowspan:2}
							,{title: '<div class="layui-txt-tips32">90天库存系数</div>', field:'noStorageCountNinety', align:"center" ,width:40, rowspan:2,hide:true}
						];
						var nowTime = new Date();
						var dateList = [];//存放日期参数,用于后面数据操作
						//获取近30天所有的日期，然后循环将信息设置进表头属性
						for(var i=30;i>0;i--){
							var dateTime = this.getAgoDay(nowTime,i);//获取近30天的日期

							dateList.push({dateTime: dateTime,dateNum:'dateNum'+i});

							/*secondCols.push({
								title:dateStr[1]+'月<br/>'+dateStr[2]+'日', field:'dateNum'+i, align:"center", rowspan:2,width:60
							});
							 */
						}
						for(var i=dateList.length-1;i>=0;i--){
							var dateTime =dateList[i].dateTime;
							var dateStr = dateTime.split('-');
							secondCols.push({
								title:dateStr[1]+'月<br/>'+dateStr[2]+'日', field:dateList[i].dateNum, align:"center", rowspan:2,width:49
							});
						}

						layui
								.extend({optimizeSelectOption: '/static/plugins/layui/extends/optimizeSelectOption/optimizeSelectOption'})
								.use(['form', 'element', 'table', 'dropdown', 'optimizeSelectOption', 'util', 'laydate'], function(){
									var element = layui.element;
									var table = layui.table;
									var dropdown = layui.dropdown;
									var form = layui.form;
									var util = layui.util;
									var $ = layui.jquery;
									var laydate = layui.laydate;
									var cols =[ //表头
										//以下是一级表头
										[
											//{title: '序号',  rowspan:2, align:"center",type:"numbers"},
                                            {title: '', rowspan:3, align:"center",fixed:'left',merge:true,width:1}
                                            ,{title: '店铺信息', colspan:3, align:"center",fixed:'left',merge:true}
                                            ,{title: '商品基础信息1', colspan:3, align:"center",fixed:'left',merge:true}
											,{title: '商品基础信息2', colspan:3, align:"center",merge:true}
											//,{title: '商品运营信息', colspan:4, align:"center"}
											,{title: '商品运营信息', colspan:2, align:"center"}
											,{title: '亚马逊库存', colspan:3, align:"center"}
											,{title: '在途库存', colspan:3, align:"center"}
											,{title: '仓储库存', colspan:3, align:"center"}
											,{title: '采购库存', colspan:3, align:"center"}
											,{title: '近30天月销量', field:'thirtyMonthCount', rowspan:3, align:"center",width:40,totalRow: true,templet:
												function(d){
													return '<span style="font-weight: bold; color: red;">'+(d.thirtyMonthCount)+'</span>';
												}
											}
											,{title: '近90天月销量', field:'ninetyMonthCount', rowspan:3, align:"center",width:40,totalRow: true,templet:
                                                function(d){
                                                    return '<span style="font-weight: bold; color: red;">'+(d.ninetyMonthCount)+'</span>';
                                                }
                                            }
											,{title: '项目', field:'itemStr', rowspan:3, align:"center",width:40,templet:
													function(d){
														return '<span style="font-weight: bold;">'+(d.itemStr)+'</span>';
													}
										}
											,{title: '近30天运营数据', colspan:30, align:"center"}
										]
									];
									cols.push(secondCols);
									cols.push([]);

									// 创建渲染实例
									table.render({
										elem: '#main_table',//表id
										url:'[(${dto.menu.pathGridRequest})]', // 此处为静态模拟数据，实际使用时需换成真实接口
										toolbar: '#toolbarDemo',//开启表格头部工具栏
										//设置头部工具栏右侧图标
										defaultToolbar: ['filter', 'print', {
											title: '导出数据'
											,layEvent: 'LAYTABLE_EXPORT_DATA'
											,icon: 'layui-icon-export'
										}, {
											title: '刷新页面'
											,layEvent: 'LAYTABLE_REFRESH'
											,icon: 'layui-icon-refresh'
										}],
										height: window.innerHeight - 40, // 最大高度减去其他容器已占有的高度差
										limit : 20,//每页显示的条数
										limits : [20,50,200,500],//每页显示的条数
										where: getConds(),
										cellMinWidth: 40,//设置所有普通单元格的最小宽度
										totalRow: true, // 开启合计行，true开启，false关闭
										page: true,//开启分页
										request: {//对默认的分页相关的请求参数
											pageName: 'page',
											limitName: 'size'
										},
										skin: 'grid',//设置表格边框风格
										even: true, // 开启隔行背景
										//表头属性集
										cols: cols,
										//数据格式解析的回调函数
										/*
										parseData: function(res){ // res 即为原始返回的数据
											console.log('res：',res);
											var resDate = res.data;
											console.log('运营数据：',resDate);
											var tableDate = setList(resDate,dateList);
											console.log('整合后的：',tableDate);

											return {
												"code": res.code, // 解析接口状态
												"msg": res.msg, // 解析提示文本
												"count": res.count, // 解析数据长度
												"data": tableDate // 解析数据列表
											};
										},
										*/
										//数据渲染完毕的回调函数
										done: function(res){
											//合并单元格
											/**
											 * 参数1  需要合并列的数组，0代表的是合并单选按钮或者是复选框 radio/checkbox 后端需要将这些字段进行排序
											 * 参数2  当前表格的index (用于在一个页面中有使用了多个表格的情况，如果只有一个表格填0就行
											 * 		  index这个值是表格加载的顺序，从0开始，如果页面上表格很多建议debug用 $(".layui-table-body")[index]看一下就拿到了)
											 * 参数3  是按照html元素合并，还是按照标签中的text内容合并，建议填true
											 * 参数4  radio/checkbox根据哪一行去合并
											 */
											layuiRowspan([ 'shopName', 'companyName', 'userName'
												, 'mainImage', 'code', 'name'
												, 'sellerSku', 'asin', 'fnSku'
												//, 'comment', 'score'
												, 'buyWinProbability', 'changeProbability'
												, 'fulfillableQuantity', 'amazonCountThirty', 'amazonCountNinety'
												, 'wayNum', 'wayCountThirty', 'wayCountNinety'
												, 'inboundWorkingQuantityCount', 'boundCountThirty', 'boundCountNinety'
												, 'noStorageCount', 'noStorageCountThirty', 'noStorageCountNinety'
												, 'thirtyMonthCount', 'ninetyMonthCount'
											], "0", true, "shopName");

											//左固定的合并相关
                                            $( "th[data-key='1-0-0']" ).find("div").attr("style","width:1px;");
                                            $( "td[data-key='1-0-0']" ).attr("style","width:1px;");
                                            var pageDataNum = res.data.length;
                                            for(var i=0;i<pageDataNum;i=i+4){
                                                for(var j=0;j<=6;j++){
                                                    $( ".layui-table-fixed" ).find( "tr[data-index='"+i+"']" ).find( "td[data-key='1-1-"+j+"']" ).attr("rowspan",4);
                                                    //$( ".layui-table-fixed" ).find( "tr[data-index='"+i+"']" ).find( "td[data-key='1-1-"+j+"']" ).find("div").attr("style","height:140px;");
                                                    $( ".layui-table-fixed" ).find( "tr[data-index='"+(i+1)+"']" ).find( "td[data-key='1-1-"+j+"']" ).hide();
                                                    $( ".layui-table-fixed" ).find( "tr[data-index='"+(i+2)+"']" ).find( "td[data-key='1-1-"+j+"']" ).hide();
                                                    $( ".layui-table-fixed" ).find( "tr[data-index='"+(i+3)+"']" ).find( "td[data-key='1-1-"+j+"']" ).hide();
                                                }
                                            }

                                            //表格下边框样式
											for(var i=0;i<pageDataNum;i=i+4){
												for(var j=0;j<=55;j++){
													$( ".layui-table" ).find( "tr[data-index='"+i+"']" ).find( "td[data-key='1-1-"+j+"']" ).addClass("layui-table-cell-tr4");
												}
												$( ".layui-table" ).find( "tr[data-index='"+i+"']" ).find( "td[data-key='1-0-0']" ).addClass("layui-table-cell-tr4");
												$( ".layui-table" ).find( "tr[data-index='"+i+"']" ).find( "td[data-key='1-0-9']" ).addClass("layui-table-cell-tr4");
												$( ".layui-table" ).find( "tr[data-index='"+i+"']" ).find( "td[data-key='1-0-10']" ).addClass("layui-table-cell-tr4");
												$( ".layui-table" ).find( "tr[data-index='"+i+"']" ).find( "td[data-key='1-0-11']" ).addClass("layui-table-cell-tr4");
												$( ".layui-table-fixed" ).find( "tr[data-index='"+i+"']" ).find( "td[data-key='1-0-0']" ).addClass("layui-table-cell-tr4");
											}


											//表头鼠标悬停弹框提示
											var tipIndex = '';
											$(".layui-txt-tips01").mouseover(function() {
												tipIndex = layer.tips('30天库存系数=亚马逊库存数量÷近30天月销量', this, {tips: [3, "#51AEFC"],time:0});
											});
											$(".layui-txt-tips02").mouseover(function() {
												tipIndex = layer.tips('90天库存系数=亚马逊库存数量÷近90天月销量', this, {tips: [3, "#51AEFC"],time:0});
											});
											$(".layui-txt-tips11").mouseover(function() {
												tipIndex = layer.tips('30天库存系数=(亚马逊库存数量+在途库存数量)÷近30天月销量', this, {tips: [3, "#51AEFC"],time:0});
											});
											$(".layui-txt-tips12").mouseover(function() {
												tipIndex = layer.tips('90天库存系数=(亚马逊库存数量+在途库存数量)÷近90天月销量', this, {tips: [3, "#51AEFC"],time:0});
											});
											$(".layui-txt-tips21").mouseover(function() {
												tipIndex = layer.tips('30天库存系数=(亚马逊库存数量+在途库存数量+仓储库存数量)÷近30天月销量', this, {tips: [3, "#51AEFC"],time:0});
											});
											$(".layui-txt-tips22").mouseover(function() {
												tipIndex = layer.tips('90天库存系数=(亚马逊库存数量+在途库存数量+仓储库存数量)÷近90天月销量', this, {tips: [3, "#51AEFC"],time:0});
											});
											$(".layui-txt-tips31").mouseover(function() {
												tipIndex = layer.tips('30天库存系数=(亚马逊库存数量+在途库存数量+仓储库存数量+采购库存数量)÷近30天月销量', this, {tips: [3, "#51AEFC"],time:0});
											});
											$(".layui-txt-tips32").mouseover(function() {
												tipIndex = layer.tips('90天库存系数=(亚马逊库存数量+在途库存数量+仓储库存数量+采购库存数量)÷近90天月销量', this, {tips: [3, "#51AEFC"],time:0});
											});
											//表头鼠标悬停离开弹框隐藏
											$(".layui-txt-tips01").mouseout(function() {layer.close(tipIndex);});
											$(".layui-txt-tips02").mouseout(function() {layer.close(tipIndex);});
											$(".layui-txt-tips11").mouseout(function() {layer.close(tipIndex);});
											$(".layui-txt-tips12").mouseout(function() {layer.close(tipIndex);});
											$(".layui-txt-tips21").mouseout(function() {layer.close(tipIndex);});
											$(".layui-txt-tips22").mouseout(function() {layer.close(tipIndex);});
											$(".layui-txt-tips31").mouseout(function() {layer.close(tipIndex);});
											$(".layui-txt-tips32").mouseout(function() {layer.close(tipIndex);});


											//合计相关
											this.elem.next().find('.layui-table-total td[data-field="fulfillableQuantity"] .layui-table-cell').text("合计中...");
											this.elem.next().find('.layui-table-total td[data-field="wayNum"] .layui-table-cell').text("合计中...");
											this.elem.next().find('.layui-table-total td[data-field="inboundWorkingQuantityCount"] .layui-table-cell').text("合计中...");
											this.elem.next().find('.layui-table-total td[data-field="noStorageCount"] .layui-table-cell').text("合计中...");
											this.elem.next().find('.layui-table-total td[data-field="thirtyMonthCount"] .layui-table-cell').text("合计中...");
											this.elem.next().find('.layui-table-total td[data-field="ninetyMonthCount"] .layui-table-cell').text("合计中...");
											var that=this;
											//更新统计数据
											$.ajax({
												type: "POST",
												url: '/web/business/tpAmazonAnalysis/getTotalCountByAnalysis',
												data: getConds(),
												success: function (data) {
													if (data.code == 0) {
														that.elem.next().find('.layui-table-total td[data-field="fulfillableQuantity"] .layui-table-cell').text(data.fulfillableQuantityTotal);
														that.elem.next().find('.layui-table-total td[data-field="wayNum"] .layui-table-cell').text(data.wayNumTotal);
														that.elem.next().find('.layui-table-total td[data-field="inboundWorkingQuantityCount"] .layui-table-cell').text(data.inboundWorkingQuantityTotal);
														that.elem.next().find('.layui-table-total td[data-field="noStorageCount"] .layui-table-cell').text(data.noStorageTotal);
														that.elem.next().find('.layui-table-total td[data-field="thirtyMonthCount"] .layui-table-cell').text(data.thirtyMonthCountTotal);
														that.elem.next().find('.layui-table-total td[data-field="ninetyMonthCount"] .layui-table-cell').text(data.ninetyMonthCountTotal);
													} else {
														alert(data.msg);
													}
												}
											});


										},
										error: function(res, msg){
											console.log(res, msg)
										}
									});



                                    // 工具栏事件
									table.on('toolbar(main_table)', function(obj){
										var id = obj.config.id;
										var checkStatus = table.checkStatus(id);
										var othis = lay(this);
										switch(obj.event){
											case 'LAYTABLE_REFRESH':
											{
												layer.confirm("确定刷新吗？",{
													btn: ['确定', '取消']
												}, function (index) {
													location.reload();
													layer.close(index);
												});
												break;
											}
											case 'LAYTABLE_EXPORT_DATA':
											{
												$.ajax({
													type: "POST",
													url: '[(${dto.menu.pathGridExportRequest})]',
													data: getConds(),
													success: function (data) {
														if (data.code == 0) {
															if(data.msg != undefined && data.msg.startsWith('http')) {
																window.open(data.msg);
															} else {
																layer.msg(data.msg);
															}
														} else {
															alert(data.msg);
														}
													}
												});
												break;
											}
										};
									});
								});
						$('body').on("mouseenter",".layui-table-body tr",function () {
							$(this).siblings().find("div").css("color","#142A48");
							$(this).find("div").css("color","#4DA1FF");
						});

						//监听点击方法
						$(document).on('click', '.preview-all', function (data) {
							var clickObject = data.target; //点击的对象
							var url = clickObject.src; //图片、视频 地址
							layer.photos({
								photos: {
									"title": '预览图',
									"id": 222,
									"start": 0,
									"data": [{
										"src": url
									}]
								}
								,closeBtn: 1 //是否显示关闭按钮
							});
						});

						//搜索
						function getConds() {
							var conditions = [];
							$(".bo-search-field").each(function(index, dom){
								var value = $(this).val();
								if (value != '') {
									conditions.push({'rangeType':$(this).attr('cond-range-type'), 'value': value, 'field':$(this).attr('name')});
								}
							});
							$(".bo-search-field-selector").each(function(index, dom){
								var value = $(this).val();
								if (value != '') {
									conditions.push({'rangeType':'t_system', 'value': value, 'field':$(this).attr('name')});
								}
							});
							return {'conditions': JSON.stringify(conditions)};
						}
					</script>
				</div>
			</div>
		</div>
<!-- 左边面板【end】 -->

	<!-- 搜索面板【start】 -->
	<th:block th:include="include/search :: searchHTML"/>
	<th:block th:include="include/search :: searchJS"/>
	<!-- 搜索面板【end】 -->

</div>

<script type="text/javascript">
	$(function() {
		$('#id_panel_left_grid').css('height', (window.innerHeight - 40) + 'px');
	});
</script>
</body>

</html>